<template>
  <el-dialog
    v-model="visible"
    width="50%"
    :title="paramsProps.title"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    destroy-on-close
  >
    <div>
      <div class="mb5">
        <el-button @click="insertEvent" type="primary" :icon="CirclePlus">新增</el-button>
        <el-button @click="removeSelectRowEvent" type="danger" :icon="Delete">删除选中</el-button>
      </div>

      <vxe-table
        border
        show-overflow
        keep-source
        ref="tableRef"
        :data="tableData"
        :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
        align="center"
        round
        max-height="350px"
        :edit-rules="validRules"
      >
        <vxe-column type="checkbox" width="60"></vxe-column>
        <vxe-column type="seq" width="60"></vxe-column>
        <vxe-column field="category_code" title="编码">
          <template #edit="scope">
            <el-input v-model="scope.row.category_code"></el-input>
          </template>
        </vxe-column>
        <vxe-column field="category_name" title="名称" :edit-render="{ autofocus: '.el-input__inner' }">
          <template #edit="scope">
            <el-input v-model="scope.row.category_name"></el-input>
          </template>
        </vxe-column>
        <vxe-column field="sort" title="排序" :edit-render="{ autofocus: '.el-input__inner' }">
          <template #edit="scope">
            <el-input-number v-model="scope.row.sort" :min="0"></el-input-number>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <template #footer>
      <el-button @click="visible = false"> 取消 </el-button>
      <el-button type="primary" @click="handleSubmit"> 确定 </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
defineOptions({
  name: 'BatchAddTable'
});
import { ref, nextTick } from 'vue';
import { useOptionsStore } from '@/stores/modules/options';
import { ElMessage } from 'element-plus';
import { CirclePlus, Delete } from '@element-plus/icons-vue';
import { getTimestamp } from '@/utils/index';
const optionsStore = useOptionsStore();
const tableRef = ref();
const visible = ref(false);
const tableData = ref([]);
const sortNum = ref(20);
const paramsProps = ref({
  title: '',
  row: {},
  api: undefined,
  getTableList: undefined
});

const validRules = ref({
  category_code: [{ required: true, message: '必须填写' }],
  category_name: [{ required: true, message: '名称必须填写' }],
  sort: [{ required: true, message: '排序必须填写' }]
});
const insertEvent = async () => {
  sortNum.value += 10;
  const $table = tableRef.value;
  if ($table) {
    const record = { category_code: `WLFL${getTimestamp()}`, sort: sortNum.value };
    const { row: newRow } = await $table.insert(record);
    await $table.setEditCell(newRow, 'category_name');
  }
};
const removeSelectRowEvent = () => {
  const $table = tableRef.value;
  if ($table) {
    $table.removeCheckboxRow();
  }
};
const handleSubmit = async () => {
  const $table = tableRef.value;
  const params = {
    parent_id: paramsProps.value.row.id,
    data: $table.getInsertRecords()
  };
  const errMap = await $table.validate(true);
  if (errMap) return;
  try {
    await paramsProps.value.api(params);
    ElMessage.success({ message: `${paramsProps.value.title}成功！` });
    paramsProps.value.getTableList();
    sortNum.value = 20;
    visible.value = false;
  } catch (error) {
    console.log(error);
  }
};
const acceptParams = params => {
  paramsProps.value = params;
  visible.value = true;
};

defineExpose({
  acceptParams
});
</script>

<style lang="scss" scoped>
/* 可按需补充样式 */
</style>
